<template>
  <div class="boxContent">
    <!-- 树形菜单 -->
    <el-scrollbar :height="sc_height">
      <!--  style="background-color: rgb(238, 241, 246); background: #fff" -->
      <el-aside width="90%">
        <el-menu :default-openeds="['1', '3']">
          <el-tree :data="tree_list" :default-expanded-keys="treeExpandData" node-key="areaCode" :highlight-current="true"
            :props="{
              checkStrictly: true,
              label: 'areaName',
              children: 'child',
              value: 'areaCode',
            }" @node-click="handleNodeClick" ref="treeBox"></el-tree>
        </el-menu>
      </el-aside>
    </el-scrollbar>
  </div>
</template>
<script>
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from "vue";
import { getDefault } from "../assets/js/getcampusList";
export default {
  setup(props, ctx) {
    let { proxy } = getCurrentInstance();
    // 获取右边树形
    const tree_list = ctx.attrs.list;
    console.log(tree_list);
    const type = ctx.attrs.type;
    const defaultAreaCode = ref(ctx.attrs.areaCode);
    const treeExpandData = ctx.attrs.type == 3 ? [] : getDefault(tree_list);
    // console.log(type);
    // const treeExpandData = ref([]);
    const treeBox = ref("");
    if (tree_list.length > 0) {
      nextTick(function () {
        // type等于是表示楼栋，默认高亮显示地区码为八位数
        if (type == 1) {
          const queryAreaCode =
            ctx.attrs.queryAreaCode ||
            treeExpandData[treeExpandData.length - 2];
          treeBox.value.setCurrentKey(queryAreaCode);
        } else {
          console.log(defaultAreaCode.value)
          if (defaultAreaCode.value) {
            nextTick(function () {
              treeBox.value.setCurrentKey(defaultAreaCode.value);
            });
          } else {
            // 默认高亮显示第一个子节点
            const queryAreaCode =
              ctx.attrs.queryAreaCode ||
              treeExpandData[treeExpandData.length - 1];
            treeBox.value.setCurrentKey(queryAreaCode);
          }
        }
      });
    }

    const handleNodeClick = (res) => {
      ctx.emit("handleNodeClick", res);
    };
    // console.log(document.documentElement.clientHeight)
    const sc_height = ref((document.documentElement.clientHeight - 50) + 'px') //默认高度
    onMounted(() => {
      window.onresize = function () { //检测window窗口改变大小
        sc_height.value = (window.innerHeight - 10) + 'px' // window的窗口高度肯定比el-scrollbar高，可以稍微减少点。减少多少自己修改50这个值
      }
    })
    return {
      treeBox,
      tree_list,
      proxy,
      treeExpandData,
      sc_height,
      handleNodeClick,
    };
  },
};
</script>
<style lang="less"  scoped>
.boxContent {
  position: relative;

}

.el-dropdown-menu,
.el-menu {
  height: 100%;
  /* overflow-y: scroll; */
  width: 100%;
  z-index: 99;
  top: 0;
  padding-bottom: 50px;
}

.el-tree {
  width: 100%;
  /* width: 255px; */
  background: #fff;
  color: #606266;
  /* overflow-x: auto; */
}

&:deep(.el-aside) {
  overflow: hidden;
}

.el-aside {
  padding-bottom: 100px;
}
</style>
